import React, { useState, useMemo } from "react";
// import classnames from "classnames";
import ShopAdjoin from "../../utils/ShopAdjoin";
import { useSelector } from "react-redux";
import { Button, Header } from "semantic-ui-react";
import "./shop.css";
export default function Shop() {
  const { commoditySpecs, data } = useSelector(state => state.shop);
  // 已选择的，就三个选项
  const [specsS, setSpecsS] = useState(
    Array.from({ length: commoditySpecs.length })
  );
  // 创建一个购物矩阵
  const shopAdjoin = useMemo(() => new ShopAdjoin(commoditySpecs, data), [
    commoditySpecs,
    data
  ]);
  // 获得可选项表
  const optionSpecs = shopAdjoin.querySpecsOptions(specsS);

  const handleClick = function(bool, text, index) {
    // 可选项没有的并且选中不同的
    if (specsS[index] !== text && !bool) return;
    // 选择中相同的，可能可选项有的，可选项没有的
    specsS[index] = specsS[index] === text ? "" : text;
    setSpecsS(specsS.slice());
  };

  return (
    <div className="container">
      {commoditySpecs.map(({ title, list }, index) => (
        <div key={index} className="list">
          <Header size='medium'>{title}</Header>
          <div>
            {list.map((value, i) => { 
              const iFOpt = optionSpecs.includes(value);
              const iFAct = specsS.includes(value)
              return (
              <Button
                key={i}
                toggle
                disabled = {!iFOpt}
                active={iFAct}
                onClick={() =>
                  handleClick(iFOpt, value, index)
                }
              >
                {value}
              </Button>
            )})}
          </div>
        </div>
      ))}
    </div>
  );
}
